<template>
  <div id="pageTable">
    <slot name="search"></slot>
    <el-table v-loading="loading" :data="tableData" :size="size" :max-height="maxHeight" border stripe tooltip-effect="dark"
              　　　　　　@selection-change="handleSelectionChange">
      <template v-for="(item, index) in columns">
        <template v-if="item.type">
          <el-table-column
            :type="item.type"
            :key="index"
            :label="item.label"
            :align="item.align"
            :width="item.width"
            :fixed="item.fixed"
          ></el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :prop="item.prop"
            :key="index"
            :label="item.label"
            :align="item.align"
            :width="item.width"
            :min-width="item.minWidth"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <slot
                :scope="scope.row"
                v-if="item.slot"
                :name="item.slot"
                :row="scope.row[item.slot]"
              />
              <ex-slot v-else-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index" :column="item" />
              <span v-else>{{ scope.row[item.prop] || '' }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <pagination
      v-show="total"
      :total="total"
      :page.sync="pageNo"
      :limit.sync="limit"
      @pagination="getData"
    />
  </div>
</template>

<script>
  // 自定义内容的组件
  var exSlot = {
    functional: true,
    props: {
      row: Object,
      render: Function,
      index: Number,
      column: {
        type: Object,
        default: null
      }
    },
    render: (h, data) => {
      const params = {
        row: data.props.row,
        index: data.props.index
      }
      if (data.props.column) params.column = data.props.column
      return data.props.render(h, params)
    }
  }
  export default {
    name: "pageTable",
    props: {
      columns: Array,
      params: Object,
      url: {
        type: String,
        default: '',
      },
      size: {
        type: String,
        default: ''
      },
      maxHeight: {
        type: Number,
        default: 1000
      }
    },
    components: {  exSlot },
    data() {
      return {
        loading: false,
        tableData: [], // 表格数据
        total: 0, // 总条数
        pageNo: 1,
        limit: 10
      }
    },
    mounted() {
    },
    methods: {
      // 请求数据
      getData() {
        this.loading = true
        let params = {
          ...this.params,
          limit: this.limit,
          page: this.pageNo
        }
        this.$http.get(this.url, params, this)
          .then((res) => {
            // 总记录
            this.total = parseInt(res.data.total)
            this.tableData = res.data.records
            // 执行自定义回调
            this.$emit('on-success', res.data)
          })
          .finally(() => {
            this.loading = false
          })
      },
      // 查询
      search() {
        this.pageNo = 1
        this.getData()
      },
      // 重新加载
      reload() {
        this.getData()
      },

      handleSelectionChange(val) {
        this.$emit('handleSelectionChange', val);
      }
    }
  }
</script>

<style scoped>

</style>
